<template>
  <div class="ipadbriefcontainer _ipadbriefcontainer">
      <div :style="reversedirection?style:''">

          <div>
              <img :src="imgsrc" alt="">
          </div>
          <div>
              <!-- 判断是都是新款 -->
              <h3>{{(isnew==='yes')?'新款':''}}</h3>
              <span>{{screensize}}</span>
              <h1>{{goodname}}</h1>
              <h2>{{goodsignature}}</h2>
              <p>进一步了解 ></p>
          </div>
          
      </div>
  </div>
</template>

<script>
export default {
   name: 'macbriefinfo',
  data() {
      return {
          style:'flex-direction:'+'row-reverse;'
      }
  },
components:{},
props:['reversedirection','isnew','screensize','goodname','goodsignature','imgsrc'],
}
</script>

<style lang="less" scoped>
 @media only screen and (min-width:800px) {
     .ipadbriefcontainer{
         display: flex;
         justify-content: center;
        //  大盒子的宽度于品目宽度一致
         width: 100%;
         padding: 30px 0;
         height: 470px;
         div{
             max-width: 1000px;
             display: flex;
             justify-content: space-around;
             align-items: center;
            //  此刻div的宽度最多为1000px
             width: 100%;
             div:nth-child(2){
                 display: flex;
                 flex-direction: column;
                 text-align: left;
                 align-items: flex-start;
                 width: 30%;
                 padding: 0 2.667vw;
                  h3{
                    color:rgb(234, 94, 0);
                }
                h1{
                    font-size: 3.167vw;
                    font-weight: 600;
                }
                h2{
                    font-size: 2.667vw;
                }
                 p{
                     color: rgb(153, 193, 230);
                 }
             }
             div:nth-child(1){
                 display: flex;
                 align-items: center;
                 width: 70%;
                 img{
                     width: 100%;
                     height: auto;
                     
                 }
         }
         }
         
     }
 }
    //  小于800px
    @media only screen and (max-width:800px) {
        ._ipadbriefcontainer{
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 30px 0;
            width: 100%;
            div{
             max-width: 1000px;
             display: flex;
             justify-content: space-around;
             align-items: center;
            //  此刻div的宽度最多为1000px
             width: 100%;
             div:nth-child(2){
                 display: flex;
                 flex-direction: column;
                 text-align: left;
                 align-items: flex-start;
                 width: 30%;
                 padding: 0 2.667vw;
                  h3{
                    color:rgb(234, 94, 0);
                }
                h1{
                    font-size: 3.167vw;
                    font-weight: 600;
                }
                h2{
                    font-size: 2.667vw;
                }
                 p{
                     color: rgb(153, 193, 230);
                 }
             }
             div:nth-child(1){
                 display: flex;
                 align-items: center;
                 width: 70%;
                 img{
                     width: 100%;
                     height: auto;
                     
                 }
         }
         }
        }
    }
 
</style>
